<template>
  <div class="">
    <el-form :model="detailForm" class="el-form" v-loading="loading" label-width="145px">
      <el-card class="box-card" shadow="never">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="车辆更换轮胎总次数:">
              <span>{{ detailForm.totalCount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆更换轮胎总金额:">
              <span>{{ format_thousand(detailForm.totalMoney) }}</span>
            </el-form-item>
          </el-col>
<!--          <el-col :span="8">-->
<!--            <el-form-item label="车辆剩余预估费用:">-->
<!--              <span>{{ format_thousand(detailForm.bicycleBudgetPrice) }}</span>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>

        <el-row :gutter="20">
          <el-col>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column width="60" align="center" label="操作">
                <template #default="{row}">
                  <el-button type="text" @click="handleView(row)">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="oldTyreMeligile" show-overflow-tooltip min-width="100" align="center" label="旧轮胎使用里程">
              </el-table-column>
              <el-table-column prop="customerName" show-overflow-tooltip min-width="100" align="center" label="客户名称">
              </el-table-column>
              <el-table-column prop="expectStartTime" show-overflow-tooltip min-width="100" align="center" label="预计开始时间">
              </el-table-column>
              <el-table-column prop="expectEndTime" show-overflow-tooltip min-width="100" align="center" label="预计结束时间">
              </el-table-column>
              <el-table-column prop="actualStartTime" show-overflow-tooltip min-width="100" align="center" label="实际开始时间">
              </el-table-column>
              <el-table-column prop="actualEndTime" show-overflow-tooltip min-width="100" align="center" label="实际结束时间">
              </el-table-column>
              <el-table-column prop="ascription" show-overflow-tooltip min-width="100" align="center" label="车辆归属">
              </el-table-column>
              <el-table-column prop="propertyRightName" show-overflow-tooltip min-width="100" align="center" label="车辆产权">
              </el-table-column>
              <el-table-column prop="TotalPrice" show-overflow-tooltip min-width="100" align="center" label="更换轮胎费用">
                <template #default="{row}">
                  {{format_thousand(row.totalPrice)}}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

      </el-card>
    </el-form>
  </div>
</template>

<script>
import {getChangeWheelMessage} from "@/api/zcwh/vehicleTabs.js";

export default {
  name: 'index',
  props: ['carId'],
  computed: {},
  watch: {},
  data() {
    return {
      detailForm: {},
      tableData: [],
      loading: false,
    };
  },
  created() {
    this.handleList()
  },
  mounted() {
  },
  methods: {
    handleList() {
      this.loading = true;
      getChangeWheelMessage(this.carId)
          .then((res) => {
            this.detailForm = res;
            this.tableData = res.vo;
            this.loading = false;
          })
          .finally(() => {
            this.loading = false;
          });
    },
    handleView(row){
      this.$router.push({
        path: "/clgl/ghltDetails",
        query: {
          id: row.carReplaceTyreId,
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.el-form {
  .box-card {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>


